<template>
  <div :class="modalClass" @click="hide" :hasReadText="hasReadText" id="modal-box">
    <div  id="content" @click.stop="">
      <p class="title" v-if="agTitle">{{agTitle}}</p>
      <div class="width100 height100 html" id="html">
        <div v-html="text" id="text" :style="style"></div>
      </div>
      <p class="hasRead">
        <span class="hoverhand" @click="callback">{{textb}}</span>
      </p>
    </div>
  </div>
</template>
<script>
  export default {
    name: "AgreeMent",
    data() {
      return {
        introduce: '协议弹窗',
        text: '',
        textb: '已阅读此协议',
        modalClass: 'modal-hide',
        agTitle : '标题',
        style:{height: '405px'}
      }
    },
    props: {
      'hasReadText': {
        /*已阅读文字*/
        type: String,
        default: '已阅读此协议'
      },
    },
    mounted() {
      this.textb = this.hasReadText ? this.hasReadText : '已阅读此协议';
    },
    methods: {
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      callback() {
        this.$emit('isRead');
        this.close();
      },
      agreement(agreementInfo , title) {
        /*协议信息*/
        if (agreementInfo) {
          this.showCover = true;
          this.text = agreementInfo;
          this.textb = this.hasReadText;
          this.show();
          document.querySelector('#text').scrollTop = 0;
        }
        this.agTitle = title || '';
        if(title){
          this.style = {height: '380px'};
        }
      },
      close() {
        // this.canScroll();
        let thiz = this;
        thiz.hide();
      }
    }
  }
</script>

<style type="text/less" lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #modal-box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
    padding-top: 0;padding-bottom: 0;
  }
  #content{
    width: 500px;height: 500px;margin-top: -250px;margin-left: -250px;left: 50%;top: 50%;padding: 20px 0;padding-bottom: 0;
    overflow:hidden;background: #f0f2f5;.borderRadius;position: absolute;
    >.title{
      text-align: center;font-size: 22px;padding-top: 10px;;
    }
  }
  .hasRead{
    .colorYellow;font-size: 18px;text-align: center;position: absolute;z-index: 1;bottom: 0;width: 100%;left: 0;background: #f0f2f5;
    >span{
      line-height: 60px;padding: 0 30px;display: inline-block;height: 60px;
    }
  }
  #content>div{
   width: 100%;margin: 0 auto;padding:15px 25px;line-height: 170%;font-size: 16px;padding-right: 10px;padding-bottom: 0px;height: 100%;
    >div{
      padding-right: 15px; overflow-x: hidden;overflow-y: scroll;word-wrap:break-word;height: 100%;
    }
  }
  #html /deep/ *{
    /*margin: initial!important;*/
    /*padding: inherit!important;*/
    /*line-height: inherit!important;*/
    // line-height: 150%;
  }
  #content>div>div{
    -ms-overflow-style: none;
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  #content>div>div::-webkit-scrollbar {width:2px; height:10px;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  #content>div>div::-webkit-scrollbar-track {background-color:#fff; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);} /*定义滚动条轨道 内阴影+圆角*/
  #content>div>div::-webkit-scrollbar-thumb {.bgYellow; border-radius:0px; -webkit-box-shadow:inset 0 0 6px rgba(255, 171, 50, 0.62);} /*定义滑块 内阴影+圆角*/

  /*动画*/
  @import "../common/style/animate.css";
</style>
